<template>
  <div class="serviceAndSupport">
    <div class="content">
      <div class="first" v-for="(item, index) in dataList" :key="index">
        <div class="item-title">{{ item.solutionName }}</div>
        <div
          class="item"
          @click="handleDeital(sub)"
          v-for="(sub, k) in item.children"
          :key="k"
        >
          {{ sub.solutionName }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { solutionList } from "@/api/other";
import { useRouter } from "vue-router";
const router = useRouter();

const dataList = ref([]);

onMounted(() => {
  getList();
});

// 获取解决方案列表
const getList = () => {
  solutionList({}).then((res) => {
    dataList.value = res.rows;
  });
};

// 查看解决方案详情
const handleDeital = (row) => {
  router.push(`/client/solution/detials?parentId=${row.solutionId}`);
};
</script>
<style lang="less" scoped>
@import "@/assets/styles/pop_up/pop_up_one.less";

.content {
  margin-left: -200px;
}
.first {
  width: 300px;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  .item-title {
    border-bottom: 1px solid #c2c2c2;
    font-size: 16px;
    width: 100%;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item {
    width: 100%;
    height: 50px;
    padding-left: 20px;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:hover {
      cursor: pointer;
      color: #fff;
      background-color: #223f9d;
    }
  }
}
</style>
